<script setup lang="ts">
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
import { list } from "postcss";
import { Ref, ref, computed, watch, withDefaults } from "vue";
const { isDark } = useDark();

let theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "default";
});

const lineChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(
  lineChartRef as Ref<HTMLDivElement>,
  {
    theme
  }
);

/** 设置props数据类型 */
interface Props {
  /** 图表标题 */
  title?: string;
  /** 图表数据 */
  data: {
    xData: string[];
    yData: number[];
  };
}
/**接收数据 */
const props = withDefaults(defineProps<Props>(), {
  title: "",
  data: () => ({
    xData: [],
    yData: []
  })
});

/**
 * @description: 设置Echarts图表数据
 * @return {*}
 */
function setLineChart() {
  setOptions({
    title: {
      text: props.title,
      fonsize: 12
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "13%",
      height: "280px",
      containLabel: true
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: "category",
      data: props.data.yData
    },
    series: [
      {
        name: "订单数",
        type: "bar",
        label: {
          normal: {
            show: true,
            position: "right",
            textStyle: { color: "#4b7eff", fontWeight: 600 }
          }
        },
        data: props.data.xData,
        realtimeSort: true
      }
    ]
  });
}

watch(
  () => props.data,
  () => {
    setLineChart();
  }
);
</script>

<template>
  <div ref="lineChartRef" style="width: 100%; height: 320px" />
</template>

<style lang="scss" scoped></style>
